<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:useBean id="bt" class="store.book.javabean.Books_Table"></jsp:useBean>
<jsp:useBean id="sbit" class="store.book.javabean.Show_Books_Info_Table"></jsp:useBean>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页 - BookStore</title>
<!-- 引入 Bootstrap -->
<link href='css/bootstrap.min.css' rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
        	<script src="js/html5shiv.min.js"></script>
        	<script src="js/respond.min.js"></script>
    	<![endif]-->
<style>
body {
	background-color: #F1F1F1;
	position: relative;
}

#myCarousel {
	margin-top: 50px;
}

.list-inline li {
	padding-left: 0;
	padding-right: 0;
}

h5 {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 7px;
}

p {
	
}

input,button,select,textarea {
	outline: none;
}

textarea {
	resize: none;
}
</style>

<script>
	function to_login_tab(self) {
		location.href = "login.jsp?" + "tab=" + encodeURI(self.textContent);
	}

	function to_register_tab(self) {
		location.href = "login.jsp?" + "tab=" + encodeURI(self.textContent);
	}
</script>

<%
	String user_email = (String) session.getAttribute("user_email");
	String admin_email = (String) session.getAttribute("admin_email");
	if (admin_email != null) {
%>
<!-- 变量isAdmin用来判断是否为管理员登录 -->
<script type="text/javascript">var isAdmin = true;</script>
<%} else {%>
<script type="text/javascript">isAdmin = false;</script>
<%}%>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
	<!-- 管理员设置首页展示书籍信息成功或失败的消息提示   -->
		<%
			String setInfo = (String) session.getAttribute("setInfo");
			if (setInfo != null) {
				if ("success".equals(setInfo)) {
		%>
		<script type="text/javascript">alert("更改成功！");</script>
		<%
				} else if ("no".equals(setInfo)) {
		%>
		<script type="text/javascript">alert("更改失败！可能是没有这本书");</script>
		<%
				} else if ("fail".equals(setInfo)) {
		%>
		<script type="text/javascript">alert("更改失败！请检查是否输入错误");</script>
		<%
				}
				session.removeAttribute("setInfo");
			}
		%>
	
	<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"
		role="navigation" style="margin-bottom: 0;">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">BookStore</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav book-nav">
					<li><a href="#section1">文学</a>
					</li>
					<li><a href="#section2">流行</a>
					</li>
					<li><a href="#section3">文化</a>
					</li>
					<li><a href="#section4">生活</a>
					</li>
					<li><a href="#section5">经管</a>
					</li>
					<li><a href="#section6">科技</a>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<%
						if (admin_email == null) {
						//管理员不需要搜索图书，所以禁用搜索按钮
					%>
				
					<li><a href="#"> <span class="glyphicon glyphicon-search"
							data-toggle="modal" data-target="#myModal"></span> </a></li>
					<%}%>
					
					<li class="dropdown">
						<%
							if (user_email == null && admin_email == null) {
						%> <a href="#" class="dropdown-toggle"
						data-toggle="dropdown"> <span class="glyphicon glyphicon-user"></span><b
							class="caret"></b> </a>
						<ul class="dropdown-menu" style="font-size: 12px;">
							<li style="text-align: center;"><a><button type="button"
										class="btn btn-primary btn-block" value="登录"
										onclick="to_login_tab(this)">登录</button>
							</a>
							</li>
							<li style="text-align: center;"><span>没有账号?<a
									href="#" onclick="to_register_tab(this)">立即注册</a>
							</span>
							</li>
						</ul> <%
 	} else if (user_email != null) {
 %> <a href="#" class="dropdown-toggle"
						data-toggle="dropdown"> <span class="glyphicon glyphicon-user"></span><b
							class="caret"></b>&nbsp;&nbsp;<b><%=user_email%></b> </a>
						<ul class="dropdown-menu" style="font-size: 12px;">
							<li style="text-align: center;"><a><form
										action="index.jsp">
										<button type="submit" class="btn btn-primary btn-block"
											name="quitLogin" value="quit">退出</button>
									</form>
							</a>
							</li>
							<li style="text-align: center;"><span><a
									href="cart.jsp">我的购物车</a>
							</span>
							</li>
						</ul>
<%
 	} else if (admin_email != null) {
%>
<a href="#" class="dropdown-toggle"
						data-toggle="dropdown"> <span class="glyphicon glyphicon-lock"></span><b
							class="caret"></b>&nbsp;&nbsp;<b><%=admin_email%></b> </a>
						<ul class="dropdown-menu" style="font-size: 12px;">
							<li style="text-align: center;"><a><form
										action="index.jsp">
										<button type="submit" class="btn btn-primary btn-block"
											name="quitLogin" value="quit">退出</button>
									</form>
							</a>
							</li>
							<li style="text-align: center;"><span><a
									href="administrator.jsp">管理商品</a>
							</span>
							</li>
						</ul>
<%	
 	}
 %>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<%
		String quitFlag = request.getParameter("quitLogin");
		if (quitFlag != null) {
			if ("quit".equals(quitFlag)) {
				session.removeAttribute("user_email");//通过session.removeAttribute来达到退出登录效果
				session.removeAttribute("admin_email");//通过session.removeAttribute来达到退出登录效果
				response.sendRedirect("index.jsp");//重新加载此页面
			}
		}
	%>

	<!-- 返回用户搜索图书结果 -->
	<%
		String UserSearchBook = (String) session.getAttribute("UserSearchBook");
		if (UserSearchBook != null) {
	%>
	<div class="modal fade" id="myModalSearchResult" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			<form action="servlet/UserSearchBook" method="post" role="form">
				<div class="modal-header">
					<button type="submit" class="close"
						aria-hidden="true" name="closeSearchResult" value="closeSearchResult">&times;</button>
					<h4 class="modal-title" id="myModalLabel">搜索结果</h4>
				</div>
				<div class="modal-body" style="overflow: hidden;">
					<%
						if ("noInput".equals(UserSearchBook)) {
					%>
					<div class="alert alert-danger alert-dismissable">
						<p>请输入书名或作者名！</p>
					</div>
					<%
						} else if ("noBook".equals(UserSearchBook)) {
					%>
					<div class="alert alert-danger alert-dismissable">
						<p>抱歉！没有你需要的书籍</p>
					</div>
					<%
						} else {
							String[] UserSearchBookArr = UserSearchBook.split("\\+");
					%>
					<ul class="list-inline">
					<%
							for (int i = 0; i < UserSearchBookArr.length; i++) {
								bt.setBook_id(Long.parseLong(UserSearchBookArr[i]));
								try {
								ResultSet rsb = bt.getBooksInfoById(bt);								
								if (rsb.next()) {
					%>
						<li class="col-xs-3" onclick="set_show_book(this)">
							<a class="thumbnail" style="text-decoration: none;">
								<img alt="" src="images/Books/<%=UserSearchBookArr[i]%>.jpg" />
								<h5><%=rsb.getString("book_name")%>-<%=rsb.getString("book_author")%></h5>
								<span style="float: left; padding-left: 7px;" class="text-danger">¥</span><p class="text-danger"><fmt:formatNumber value='<%=rsb.getDouble("book_price")%>' pattern="0.00"></fmt:formatNumber></p>
							</a>
						</li>
					<%
								}
								} catch (SQLException e) {}
							}
					%>
					</ul>
					<%
						}
					%>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-default" name="closeSearchResult" value="closeSearchResult">关闭</button>
					<button type="submit" class="btn btn-primary" name="closeSearchResult" value="afreshSearch">返回</button>
				</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<%
		} else {
	%>

	<!-- 模态框（Modal） -->
	<!-- 用户搜索图书 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">搜索图书</h4>
				</div>
				<form action="servlet/UserSearchBook" method="post" role="form">
					<div class="modal-body">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="书名..."
								name="UserSearchBookName" />
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="作者..."
								name="UserSearchBookAuthor" />
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary">搜索</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<%}%>

	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<!-- 轮播（Carousel）指标 --><!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="images/Carousel/58006752N4317ad1a.jpg" width="100%"
					class="img-responsive" alt="First slide">
			</div>
			<div class="item">
				<img src="images/Carousel/5800679cN83e2a7de.jpg" width="100%"
					class="img-responsive" alt="Second slide">
			</div>
			<div class="item">
				<img src="images/Carousel/58006906Ncbe8bc57.jpg" width="100%"
					class="img-responsive" alt="Third slide">
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left"></span> </a> <a
			class="carousel-control right" href="#myCarousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span> </a>
	</div>

	<!--书籍分类浏览-->
	<script>
		var bookType = document.getElementsByClassName('book-nav');
	</script>

	<!-- 文学类书籍 -->
	<div id="section1" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[0].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				try {
					ResultSet rs = sbit.getShowBooksInfo();
				int count = 0;
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this, <%=count%>)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6) {
						break;
					}
				}
			%>
		</ul>
	</div>

	<!-- 流行类书籍 -->
	<div id="section2" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[1].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6 * 2) {
						break;
					}
				}
			%>
		</ul>
	</div>

	<!-- 文化类书籍 -->
	<div id="section3" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[2].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6 * 3) {
						break;
					}
				}
			%>
		</ul>
	</div>

	<!-- 生活类书籍 -->
	<div id="section4" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[3].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6 * 4) {
						break;
					}
				}
			%>
		</ul>
	</div>

	<!-- 经管类书籍 -->
	<div id="section5" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[4].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6 * 5) {
						break;
					}
				}
			%>
		</ul>
	</div>

	<!-- 科技类书籍 -->
	<div id="section6" class="container">
		<h4>
			<span class="glyphicon glyphicon-book"></span> <strong><script>
				document.write(bookType[0].children[5].textContent);
			</script>
			</strong>
		</h4>
		<ul class="list-inline">
			<%
				while (rs.next()) {
					count++;
			%>
			<li class="col-xs-4 col-sm-3 col-md-2 col-lg-2"
				onclick="set_show_book(this)"><a class="thumbnail"
				style="text-decoration: none;"> <img
					src="images/Books/<%=rs.getLong("book_id")%>.jpg" />
					<h5><%=rs.getString("book_name")%>-<%=rs.getString("book_author")%></h5>
					<span style="float: left; padding-left: 7px;" class="text-danger">¥</span>
				<p class="text-danger">
						<fmt:formatNumber value='<%=rs.getDouble("book_price")%>'
							pattern="0.00"></fmt:formatNumber>
					</p> </a></li>
			<%
				if (count == 6 * 6) {
						break;
					}
				}
			} catch (SQLException e) {}
			%>
		</ul>
	</div>

	<!-- 模态框（Modal） -->
	<!--管理员通过输入书籍编号，可设置展示的书籍-->
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">设置要展示的书籍</h4>
				</div>
				<form role="form" action="servlet/SetShowBooksInfo" method="post">
					<div class="modal-body">
						<input type="text" class="form-control" name="set_book_id"
							placeholder="输入书籍编号" />
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" id="subid" name="subid">确定</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="js/jquery-3.1.1.min.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(".classname img").addClass(
				"carousel-inner img-responsive img-rounded");//图片自动缩放
				
		//页面加载后自动弹出搜索结果模态框
    	$(function(){
        	$('#myModalSearchResult').modal({
        		show:true,
        		backdrop:"static",
        	});
    	});
    	
    	//如果用户点击返回重新搜索
    	var SearchResult = location.href;
    	var afreshSearch = SearchResult.split("?")[1].split("=")[1];
    	if (afreshSearch = "afreshSearch") {
    		$(function(){
        		$('#myModal').modal({
        			show:true,
        			backdrop:"static",
        		});
    		});
    	}
	</script>
	<script type="text/javascript">
		function onKeyDown(event) {
			var e = event || window.event
					|| arguments.callee.caller.arguments[0];
			if (e && e.keyCode == 27) { // 按 Esc 
				//要做的事情
			}
			if (e && e.keyCode == 113) { // 按 F2 
				//要做的事情
			}
			if (e && e.keyCode == 13) { // enter 键
				
			}
		}

		//浏览者或者普通用户点击相应书籍进入商品详情页购买书籍
		//管理员点击相应书籍可以更改要展示的书籍
		function set_show_book(self, id) {
			if (isAdmin) {
				self.setAttribute("data-toggle", "modal");
				self.setAttribute("data-target", "#myModal2");
				document.getElementById('subid').setAttribute("value", id);
			} else {
				var sourcesrc = $(self).find("img")[0].src;

				var imgsrc = sourcesrc.substr(sourcesrc.indexOf("BookStore/")
						+ "BookStore/".length, sourcesrc.length);
				var bookid = imgsrc.split("/")[2].split(".")[0];

				location.href = "item.jsp?" + "currentItem=" + bookid;
			}
		}
	</script>
</body>
</html>

